<!--46铸铁或铸钢件疲劳强度计算（GL）-->
<template>
  <div style="width: 100%; height: 100%;font-size: 16px;display: flex;overflow-x:auto;overflow-y:auto">
    <div class="left">
      <div class="left-top">
        <div class="title" style="height: 7%;">S_N曲线输入参数</div>
        <div class="left-top-left">
          <div>
            <input type="text"  v-model="input.Rm">
            <span>拉伸强度(MPa)</span>
          </div>
          <div>
            <input type="text" v-model="input.Rp">
            <span>屈服强度(MPa)</span>
          </div>
          <div>
            <input type="text" v-model="input.T">
            <span>零件壁厚(mm)</span>
          </div>
          <div>
            <input type="text" v-model="input.Rz">
            <span>表面粗糙度Rz(um)</span>
          </div>
          <div>
            <input type="text" v-model="input.Y">
            <span>延伸率(%)</span>
          </div>
          <div>
            <select v-model="input.nor">
              <option value="1">标准</option>
              <option value="2">拉伸</option>
            </select>
            <span>试验类型</span>
          </div>
          <div>
            <select v-model="input.Steel">
              <option value="1">铸铁</option>
              <option value="2">铸钢</option>
            </select>
            <span>材料类型</span>
          </div>
          <div>
            <label style="margin-top: 2%">0</label>
            <span>S-N曲线应力比</span>
          </div>
        </div>
        <div class="left-top-left" style="float: right">
          <div>
            <input type="text" v-model="input.Ak">
            <span>结构应力影响系数</span>
          </div>
          <div>
            <input type="text" v-model="input.Sup">
            <span>内部材料支撑系数</span>
          </div>
          <div>
            <input type="text" v-model="input.Vm">
            <span>材料局部安全系数</span>
          </div>
          <div>
            <select v-model="input.Rm1">
              <option value="1">是</option>
              <option value="2">否</option>
            </select>
            <span>抗拉强度壁厚效应</span>
          </div>
          <div>
            <label style="margin-top: 2%">97.5</label>
            <span>可靠性(%)</span>
          </div>
          <div>
            <select v-model="input.j">
              <option value="1">0</option>
              <option value="2">1</option>
              <option value="3">2</option>
              <option value="4">3</option>
              <option value="5">4</option>
              <option value="6">5</option>
            </select>
            <span>零件质量等级</span>
          </div>
          <div>
            <select v-model="input.j0">
              <option value="1">超声波（UT）或X光检查（RT）</option>
              <option value="2">液体渗透（PT）或磁粉表面探伤（MT）</option>
            </select>
            <span>测试方法</span>
          </div>
        </div>
      </div>
      <div class="left-mid">
        <div class="title" style="height:10%">疲劳安全系数输入参数</div>
        <div class="left-mid-top" style="height: 15%;margin-top: 1%">
          <input v-model="input.load" style="display: block;float:right;height: 70%" type="text" value="1000">
          <span style="display: block;float:right;height: 100%">计算载荷(kNm)</span>
        </div>
        <div class="left-mid-top" style="float: right;height: 15%;margin-top: 1%">
          <input v-model="input.F_M" style="display: block;float:right;height: 70%;" type="text" value="27.3">
          <span style="display: block;float:right;height: 100%;">计算应力(MPa)</span>
        </div>
        <div class="img-content">
          <div class="title" style="height: 13%">载荷谱显示</div>
          <div style="width: 100%;height: 87%;overflow-y:auto">
            <span>
              <td>最大载荷(kNm)</td>
              <td>最小载荷(kNm)</td>
              <td>循环次数</td>
            </span>
            <span v-for="(item) in this.outputform" :key="item">
              <td>{{item[0]}}</td>
              <td>{{item[1]}}</td>
              <td>{{item[2]}}</td>
            </span>
          </div>
        </div>
        <a-upload :showUploadList="false" :maxCount="1" :customRequest="customRequest" name="file">
          <button class="button1" style="float: right;position:absolute;top: 60%;width: 18%;height: 4%">导入载荷谱</button>
        </a-upload>
        <p style="margin-left: 2%">注：载荷谱文件格式为.xls或.xlsx格式，其各列参数为上表所示(无需表头)</p>
      </div>
      <button class="button1" style="margin-left:83%;width: 15%;height:4%;" @click="onSubmit1">计算</button>
      <div class="left-bottom">
        <div class="title" style="height: 30%">输出结果</div>
        <div class="left-bottom-content">
          <label style="text-align: center">{{ output.P }}</label>
          <span>疲劳安全系数</span>
        </div>
        <div class="left-bottom-content" style="float: right">
          <label style="text-align: center">{{ output.sum_damage }}</label>
          <span>损伤率</span>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-top">
        <div class="title" style="height: 5%;">S_N曲线参考图样</div>
        <img src="@/assets/image/image_46_1.jpg" style="height: 80%;margin-left: 10%;outline: 1px solid black"/>
      </div>
      <div class="right-bottom">
        <div class="title" style="height: 17%">S_N曲线参考值</div>
        <div>
          <ul>
            <li>上限点循环次数 N1
              <label>
                {{ output.N1 }}
              </label>
            </li>
            <li>上限点应力范围值 △б1
              <label>
                {{ output.R1 }}
              </label>
            </li>
            <li>第1段曲线材料常数 m1
              <label>
                {{output.m1}}
              </label>
            </li>
          </ul>
        </div>
        <div>
          <ul>
            <li>转折点循环次数 ND
              <label>
                {{ output.ND }}
              </label>
            </li>
            <li>转折点应力范围值 △б*A
              <label>
                {{ output.R_A }}
              </label>
            </li>
            <li>第2段曲线材料常数 m2
              <label>
                {{ output.m2 }}
              </label>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import {cast_steel_S_N_1Get, firedelete, firetext} from "@/api/file";

export default {
  created(){
    document.title="铸铁或铸钢件疲劳强度计算"
    this.$store.state.file.key =46
  },
  name: "cast_steel_S_N_1",
  data(){
    return{
      form2:{
        uuids:[]
      },
      params_46:this.$store.state.file.dataList[46],
      input:{
        Rm:400,  //拉伸强度 1-标准；2-拉伸
        nor:1,  //实验类型
        Rz:25,  //表面粗糙度
        Ak:1,  //结构应力影响系数
        Sup:1,  //内部材料支撑系数
        Steel:1,  //材料类型 ）1-铸铁；2-铸钢
        T:110,  //零件壁厚
        Vm:1.15,  //材料局部安全系数
        Rp:240,  //屈服强度
        F_M:27.3,  //计算应力
        j:1,  //零件质量等级  1-0；2-1；3-2；4-3；5-4；6-5
        j0:1,  //测试方法  （下拉选项）1-超声波（UT）或X光检查（RT）；2-液体渗透（PT）或磁粉表面探伤（MT）
        Spu:0.666666666,  //1
        Y:18,  //延伸率
        load:1000,  //计算载荷
        Rm1:1,  //抗拉强度壁厚效应  1-是；2-否
        //maspanix_load_1:[1,2,3] //载荷谱（第1列：最大载荷(kNm)；第2列：最小载荷(kNm)；第3列：循环次数）
        uuid:""
      },
      output:{
        N1:"static text",  //上限点循环次数 N1
        R1:"static text",  //上限点应力范围值  △σ1
        m1:"static text",  //第1段曲线材料常数 m1
        ND:"static text",  //转折点循环次数 ND
        R_A:"static text",  //转折点应力范围值 △σ*A
        m2:"static text",  //第2段曲线材料常数 m2
        P:"static text",  //疲劳安全系数
        sum_damage:"static text",  //损伤率
      },
      outputform:[],
    }
  },
  mounted(){
    //绑定页面退出事件
    window.onbeforeunload= (e)=>{
      e = e || window.event;
      if (e) {
        e.returnValue = '关闭提示';
      }
      this.delete()//调用自己的方法
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return '关闭提示';
    };
  },
  methods: {
    //同步请求删除载荷谱数组的方法
    async delete(){
      // await axios.get("http://localhost:7001/hellow").then(res => {
      // })
      this.form2.uuids=this.form2.uuids.toString();//将载荷谱文件数组转成字符串
      await firedelete(this.form2).then(res => {//这里需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
        console.log(res);
      })
    },
    customRequest(data){
      const formData = new FormData()
      formData.append( 'fileName' , data.file)
      firetext(formData)
          .then(res => {//这里需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
            console.log(res)
            this.outputform=res.data.filedata;
            for (let i = 0; i < this.outputform.length; i++) {
              if(this.outputform[i][0]==null)
              {this.outputform.length=i;
                break;}
            }
            this.input.uuid=res.data.uuid;
            this.form2.uuids.push(res.data.uuid);
          })
          .catch(error => {
            console.log(error)
          });
    },
    change(){
      this.output.N1=this.outputform[0];
      this.output.R1=this.outputform[1];
      this.output.m1=this.outputform[2];
      this.output.ND=this.outputform[3];
      this.output.R_A=this.outputform[4];
      this.output.m2=this.outputform[5];
      this.output.P=this.outputform[6];
      this.output.sum_damage=this.outputform[7];

    },
    onSubmit1() {
      if(this.input.uuid=="")
        this.$message.warning("请先导入载荷谱")
      else {
        cast_steel_S_N_1Get(this.input).then(res => {
          console.log("打印结果");
          console.log(res);
          this.outputform = res;
          this.change();
        });
      }
    }
  }
}
</script>

<style scoped>
*{
  overflow: hidden;
}
.left-top,.left-mid,.left-bottom,.right-bottom,.right-top,.img-content{
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.button1{
  background-color: #6dd400;
  border-radius: 4px;
  border: 2px #686868;
}
li{
  list-style: none;
}
ul{
  padding-left: 0;
}
ul label{
  margin-left: 2%;
  margin-right: 2%;
}
.title{
  background-color: #D7D7D7;
  border-radius: 3px;
  font-weight: bolder;
  font-size: 17.5px;
}
input,select,label{
  height: 58%;
  width: 32%;
  text-align: center;
}
.left-top-left > div input,
.left-top-left > div select{
  float: right;
  display: block;
  height: 90%;
}
.left{
  width: 40%;
  height: 100%;
  position: relative;
}
.left-top{
  height: 39%;
  width: 96%;
  margin: 2% 2% 1% 2%;

}

.left-top-left{
  width: 49%;
  height: 100%;
  float: left;
}
.left-top-left>div{
  width: 100%;
  height: 10%;
}
.left-top-left>div>input,
.left-top-left>div>select,
.left-top-left>div>label{
  float: right;

  margin-right: 4%;
  line-height:100%;
}
.left-top-left>div>label{
  text-align: center;
  margin-top: 5%;
}
.left-top-left>div>span{
  display: block;
  width: 60%;
  height: 100%;
  margin-right: 4%;
  text-align: right;
  float: right;
  overflow: hidden;
}
.img-content td{
  display: block;
  float: left;
  width: 33.33333333333333333333333333%;
}
.left-mid{
  height: 35%;
  width: 96%;
  margin: 1.5% 2% 0% 2%;
}
.left-mid-top,
.left-bottom-content{
  float: left;
  width: 48%;
}
.left-mid-top input,
.left-mid-top span,
.left-bottom-content span,
.left-bottom-content label
{
  float: right;
  margin-right: 4%;
}

.img-content{
  display: inline-block;
  width: 75%;
  height: 65%;
  margin: -1% 2% 3% 2%;
  margin-bottom: 0;
  border: 1px rgba(0,0,0,.3) solid;
}

.img-content span:first-child td{

  border: 1px solid rgba(0,0,0,.5);
  vertical-align:middle;
  text-align: center;
}
.img-content td{
  border: 1px solid silver;
  vertical-align:middle;
  text-align: center;
}
.img-content span:nth-child(2n+1){
  background-color: rgb(239,239,239);
}


.left-bottom{
  height: 11.5%;
  width: 96%;
  margin-left: 2%;
}
.left-bottom-content{
  margin-top: 2%;
}

.right{

  position: relative;
  margin-left: 0.5%;
  width: 59%;
  height: 100%;
}
.right-top{
  width: 99%;
  height: 70%;
  margin-top: 1.6%;
}
.right-bottom{
  width: 99%;
  height: 18%;
  margin-top: 2%;
}
.right-bottom>div:not(:first-of-type){
  float: left;
  width: 50%;
}
.right-bottom li{
  margin-top: 1%;
  text-align: right;
  width: 100%;
}
</style>